<template>
<!-- 充值记录 -->
<div id="addMoneyRecord">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<pullRefresh @refresh="toRefresh">
			<div class="order-list">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="li-date">
							<span>付款方式</span>
							<span>充值金额</span>
							<span>用户操作</span>
						</div>
					</li>
					<li class="mui-table-view-cell" v-for="(item,index) in records">
						<div class="li-date">
							<span style="width:70px;text-align: left;">{{item.way}}</span>
							<span style="width:70px;text-align: left;">+{{item.money}}</span>
							<button v-if="!item.cancel&&item.statue==2" type="button" class="mui-btn mui-btn-danger" @tap="toPay(index)">去付款</button>
							<button v-if="!item.cancel&&item.statue==3" type="button" style="opacity: .5;" class="mui-btn mui-btn-warning">已付款</button>
							<button v-if="!item.cancel&&item.statue==4" type="button" style="opacity: .5;" class="mui-btn mui-btn-success">已完成</button>
							<button v-if="item.cancel" type="button" style="opacity: .5;" class="mui-btn mui-btn-royal">已撤销</button>
						</div>
						<p>{{new Date(item.time).toLocaleString('chinese',{hour12:false})}} {{item.statueStr}}</p>
						<p>订单号码:{{item.id}} 备注码:{{item.remarkCode}}</p>
					</li>
				</ul>
			</div>
		</pullRefresh>
		<!-- 分页 -->
		<div v-if="pageNum>1" class="pageNav">
			<button :style="curPage==1?'opacity:.2':''" @tap="changePage(-1)" type="button" class="mui-btn mui-btn-primary">«上一页</button>
			<select v-model="curPage">
				<option v-for="i in pageNum" :value="i">{{i}}/{{pageNum}}</option>
			</select>
			<button :style="curPage==pageNum?'opacity:.2':''" @tap="changePage(1)" type="button" class="mui-btn mui-btn-primary">下一页»</button>
		</div>
	</div>
	<div id="toPay" :style="showToPay?'left:0':'left:100%'">
		<span class="mui-icon mui-icon-close" @tap="showToPay=false;accountData={}"></span>
		<h3>请按要求付款</h3>
		<div class="explain">
			付款说明：{{payExplain}}
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">收款方式：{{accountData.way}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.remarkCode)" v-clipboard:success="onCopy" v-clipboard:error="onError">备注码：{{accountData.remarkCode}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.account)" v-clipboard:success="onCopy" v-clipboard:error="onError">账号：{{accountData.account}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.name)" v-clipboard:success="onCopy" v-clipboard:error="onError">名称：{{accountData.name}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.bankName)" v-clipboard:success="onCopy" v-clipboard:error="onError">开户行：{{accountData.bankName}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.bankBranch)" v-clipboard:success="onCopy" v-clipboard:error="onError">支行：{{accountData.bankBranch}}</li>
		</ul>
		<button type="button" class="mui-btn mui-btn-warning" @tap="okPayfn(accountData.recordId)">我已付款</button>
	</div>
</div>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {addMoneyRecord,findPayCodeById,okPay} from "@/api/my"
export default{
	name:"addMoneyRecord",
	components:{
		  pullRefresh
	},
	data(){
		return{
			curPage:1,
			pageNum:1,
			records:[],
			showToPay:false,
			accountData:{}
		}
	},
	watch:{
		curPage(val){
			this.getAddMoneyListByPage(val)
		}
	},
	mounted(){
		//请求第一页
		this.getAddMoneyListByPage(1)
	},
	methods:{
		getAddMoneyListByPage(page,callback){
			mui.showLoading("等待中..", "div");
			addMoneyRecord({page}).then(res=>{
				this.pageNum = res.pageNum
				this.records = res.records
				mui.hideLoading()
				callback && callback()
			})
		},
		toPay(index){
			mui.showLoading("等待中..", "div");
			this.showToPay = true;
			let _id = this.records[index].id,
				remarkCode = this.records[index].remarkCode;
			findPayCodeById(_id).then(res=>{
				res.recordId = _id
				res.remarkCode = remarkCode
				this.accountData = res
				mui.hideLoading()
			})
		},
		okPayfn(id){
			mui.showLoading("等待中..", "div");
			okPay(id).then(res=>{
				mui.hideLoading()
				if(res==200){
					mui.toast("已提交付款")
					this.showToPay = false;
					//请求第一页
					this.getAddMoneyListByPage(1)
				}
			})
		},
		changePage(e){
			if(e==-1){
				if(this.curPage==1){
					return;
				}else{
					this.curPage--
				}
			}else{
				if(this.curPage==this.pageNum){
					return;
				}else{
					this.curPage++
				}
			}
		},
		copyLink(e){	//复制
			return e
		},
		onCopy(e){
			mui.alert("复制到剪贴板成功")
		},
		onError (e) {
		   mui.alert("复制失败")
		},
		toRefresh(callback){
			 //这里进行重新加载数据操作
			 this.getAddMoneyListByPage(1,()=>{
				callback()
			 })
		}
	}
}
</script>